<template>
  <div class="login flex-center">
    <div class="box">
      <h1>Welcome</h1>
      <div class="form">
        <input type="text" placeholder="您的用户名" v-model="form.username" />
        <input type="password" placeholder="您的密码" v-model="form.password" />
        <div class="btn" @click="login">
          <ul>
            <li>
              登录
              <span></span><span></span><span></span><span></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul class="squares">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script lang="js" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { useLoginStore } from "@/store/login";

const loginStore = useLoginStore();

const form = reactive({
  username: "admin",
  password: "123456",
});

const router = useRouter();

// 登录
const login = () => {
  loginStore.login({ ...form }).then(() => {
    // router.push({ path: route.query.redirect ?? "/" });
    router.push("/");
  });
};
</script>

<style scoped lang="less">
@import url("./css/login.less");
</style>